<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <ul class="list">
    <li>link1</li>
    <li class="abc">link2</li>
    <li class="qwe">link3</li>
    <li class="abc qwe">link4</li>
    <li>link5</li>
    <li class="abc qwe">link6</li>
    <li>link7</li>
    <li class="abc">link8</li>
    <span class="abc">1231</span>
    <p class="abc">4576</p>
  </ul>

</body>
<script>

  var list = document.querySelector(".list");
  var li = document.querySelectorAll(".list .abc");

  list.onclick = eventProxy( li, function(){
    console.log("找到class中有abc的元素了")
    console.log(this)
  } );


  // 事件委托的封装
  function eventProxy( child, cb ){
    return function(eve){
      var e = eve || window.event;
      var target = e.target || e.srcElement;
      for(var i=0;i<child.length;i++){
        if(target === child[i]){
          // 修改this指向，为当前触发事件的元素
          cb.call( target );
        }
      }
    }
  }


  // 事件委托的封装
  // function eventProxy( child, cb ){
  //   return function(eve){
  //     var e = eve || window.event;
  //     var target = e.target || e.srcElement;
  //     for(var i=0;i<child.length;i++){
  //       if(target === child[i]){
  //         cb( target );
  //       }
  //     }
  //   }
  // }



  




  // var li = document.querySelectorAll(".list li")
  // for(var i=0;i<li.length;i++){
  //   li[i].onclick = function(){
  //     console.log(this);
  //   }
  // }

  
</script>
</html>